<template>
  <view>
    <u-tabs :list="topList"
            lineWidth="30"
            lineColor="#f56c6c"
            :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
            :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"
            itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
            @click="click"></u-tabs>
    <view class="list"
          v-show="goodsList.length > 0">

      <scroll-view class="list_box"
                   scroll-y="true">
        <view class="list_item" 
              v-for="(item,index) in goodsList"
              :key="index"
              @click="goNewsDet(item.id)">
          <view class="list_left">
            <image :src="$serverIp+item.image"
                   mode="aspectFit"></image>
          </view>
          <view class="list_right">
            <view class="list_title">{{item.name}}</view>
            <view class="list_time">{{item.createtime}}</view>
            <view class="list_data_box">
              <view class="list_read_num">
                <image src="../../static/image/zcht_ico_yd_nor@2x.png"
                       mode=""></image>{{item.read_num}}
              </view>
              <view class="list_com_num">
                <image src="../../static/image/sy_ico_pj@2x.png"
                       mode=""></image>{{item.comment_num}}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-empty icon="/static/img/zpzx_img_k@2x.ea242e98.png"
             v-show="goodsList.length<1">
    </u-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      topList: [],
      goodsList: [],
      type_id: 1
    }
  },
  onLoad() {
    this.getTopList()
    this.getGoodsList()
  },
  methods: {
    click(item) {
      this.type_id = item.id
      this.getGoodsList()
    },
    async getTopList() {
      let { data } = await this.$http.post('/zhang/Recruitinformation/get_type_list')
      this.topList = data.data
    },
    async getGoodsList() {
      let { data } = await this.$http.post('/zhang/Recruitinformation/get_information_list', { type_id: this.type_id })
      this.goodsList = data.data
    },
	goNewsDet(id){
		uni.navigateTo({
			url:"/pages/information/news_det?id="+id
		})
	}
  }
}
</script>

<style>
.list {
  margin-top: 60rpx;
  height: 80vh;
}
.list_box {
  width: 100%;
  height: 90vh;
  /* border:1rpx solid red */
}
.list_item {
  height: auto;
  width: 100%;
  padding: 0rpx 30rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 30rpx;
  background-color: #ffffff;
}
.list_left image {
  width: 196rpx;
  height: 130rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  background-color: #f5f5f5;
}
.list_right {
  height: 100%;
  width: 85%;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.list_title {
  width: 100%;
  padding-right: 10rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.list_time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 10rpx;
}
.list_data_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding-right: 220rpx;
  box-sizing: border-box;
}
.list_read_num {
  display: flex;
  align-items: center;
}
.list_com_num {
  display: flex;
  align-items: center;
}
.list_read_num image {
  width: 27rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.list_com_num image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.bom_line {
  width: 100%;
  height: 160rpx;
}
/* 暂无消息 */
.none_msg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 300rpx;
}

.none_msg image {
  width: 354rpx;
  height: 323rpx;
}

.none_title {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 40rpx;
}
</style>


